<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格获取</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        body > div {
            width: 50%;
            margin: auto;
            text-align: center;
        }
        td,th {
            width: 100px;
        }
        .btn {
            height: 30px;
            padding: 0 10px;
            display: flex;
            justify-content: flex-end;
        }
        .btn button {
            margin: 2px 5px;
        }

    </style>
</head>
<body>
<div>
    <div class="btn">
        <button onclick="add();">新增</button>
        <button onclick="sub()">提交</button>
    </div>
    <div>
        <table border="1" cellpadding="5" cellspacing="0">
            <thead>
            <tr>
                <th>序号</th>
                <th>名字</th>
                <th>性别</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

</body>
<script>
    var gender = [
        {name:'男',value:'man'},
        {name:'女',value:'woman'}
    ]
    var like = [
        {name:'跑步',value:'run'},
        {name:'阅读',value:'read'},
        {name:'听音乐',value:'music'}
    ]
    function add(){
        $('tbody').append('<tr value="'+num()+'">' +
            '<td>'+ (num()+1) +'</td>' +
            '<td><input type="text" name="name'+num()+'" placeholder="名字"/></td>' +
            '<td><select name="gender'+num()+'">'+ selectGet(gender) +'</select></td>' +
            '<td><input type="text" name="age'+num()+'" placeholder="年龄"></td>' +
            '<td><select name="like'+num()+'">'+ selectGet(like) +'</select></td>' +
            '<td><button onclick="remove(this);">删除</button></td>' +
            '</tr>')
    }
    function num(){
        var num = $('tbody').children().length;
        return num;
    }
    function remove(btn){
        btn.closest('tr').remove();
        var tbodyCh = $('tbody').children();
        for(var i=0;i<tbodyCh.length;i++){
            tbodyCh.eq(i).children('td:first-child').text(i+1)
        }
    }
    function selectGet(sel){
        var option = '<option value="" style="display: none" selected>请选择</option>';
        for(var i=0;i<sel.length;i++){
            option += '<option value="'+ sel[i].name +'">'+sel[i].name+'</option>'
        }
        return option;
    }
    function sub(){

        var tableMsg = [];

        for(var i=0;i<$('tbody tr').length;i++){
            var name = $('tr input[name="name'+i+'"]').val();
            var gender = $('tr select[name="gender'+i+'"]').val();
            var age = $('tr input[name="age'+i+'"]').val();
            var like = $('tr select[name="like'+i+'"]').val();
            var obj = {
                name: name,
                gender: gender,
                age: age,
                like: like
            }
            tableMsg.push(obj)
        }

        console.log(tableMsg);
    }

</script>
</html>